<%@include file="../../../fragments/_taglibs.jsp" %>
<%@include file="../../../fragments/_message.jsp" %>
<style>
.buttonNext:visited {text-decoration: none;color:#FFF}
.buttonNext {
  
  
  margin:5px 3px 0 3px;
  padding:5px;
  text-decoration: none;
  text-align: center;
  font: bold 13px Verdana, Arial, Helvetica, sans-serif;
  width:150px;
  color:#FFF;
  outline-style:none;
  background-color:   #87B308;
  border: 1px solid #5A5655;
  -moz-border-radius  : 5px; 
  -webkit-border-radius: 5px;    
}
</style>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/js_plantilla/scripts/wizard_functions.js"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/wizard_style.css">
<script>
    jQuery(function() {
        var order = jQuery("#sec_sortable").sortable('toArray');
            var stringOrden = "";
            jQuery('#seccionOrden').val(order);
            
    });
</script>

<center>
    <h3> Favor mueva las secciones en relacion al orden que desea que se muestren en pantalla</h3>

<form:form modelAttribute="wizardFormController" method="PUT" action="./wizard/saveorden/" >    
    <div><h3>Formulario:</h3> <b>${wizardFormController.nombreForm}</b></div><br/>
 <c:choose>
<c:when test="${wizardFormController.tbSeccionWizardPojo!=null && fn:length(wizardFormController.tbSeccionWizardPojo)>0}">
    <ul id="sec_sortable">
                        <c:forEach items="${wizardFormController.tbSeccionWizardPojo}" var="item">
               
                            <li id="${item.tbFormulariosSecciones.cseccion}">${item.tbFormulariosSecciones.dseccion}</li>
                        </c:forEach>
    </ul>
    
</c:when>

 </c:choose>
 
 <form:hidden path="ordenSecciones" id="seccionOrden" />
 
 <input class="buttonNext" type="submit" style="cursor:pointer" value="Guardar"/>
 
 
 </form:form>
</center>